:root{
  --red:#f11d40;
  --red-dark:#ce3c10;
  --bg:#fbfbfb;
  --card:#fff;
  --text:#111;
  --muted:#666;
  --shadow: 0 18px 40px rgba(16,16,16,0.08);
  --radius:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:'Poppins',system-ui,Arial; background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased;
}

/* container */
.container{width:min(1200px,94%); margin:0 auto;}

/* HEADER */
header{background:linear-gradient(135deg,var(--red-dark),var(--red)); color:#fff; padding:28px 0 48px; overflow:hidden}
.header-inner{display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:14px}
.logo{width:92px;height:92px;border-radius:50%;object-fit:cover;border:4px solid rgba(255,255,255,0.14); box-shadow:var(--shadow); transition:transform .6s ease}
.brand-name{font-weight:800;font-size:20px}
.brand-name span{color:rgba(255,255,255,0.95)}
.brand-tag{font-size:12px;opacity:.95}

/* nav */
.topnav{display:flex; gap:14px}
.topnav a{color:rgba(255,255,255,0.95); text-decoration:none; font-weight:600; padding:8px 12px; border-radius:8px; transition:background .18s, transform .18s}
.topnav a:hover{background:rgba(255,255,255,0.06); transform:translateY(-3px)}

/* hero */
.hero{padding:42px 0 56px; text-align:center}
.hero-title{font-family:'Playfair Display',serif; font-weight:700; font-size:clamp(28px,6vw,56px); margin:8px 0}
.hero-title span{display:block}
.hero-sub{font-size:18px; color:rgba(255,255,255,0.95); margin-bottom:18px}
.hero-ctas{display:flex; gap:12px; justify-content:center}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:999px; cursor:pointer; text-decoration:none; font-weight:700}
.btn-light{background:#fff;color:#111}
.btn-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.2)}

/* section basics */
.section{padding:70px 0}
.section-title{color:var(--red); font-size:clamp(20px,2.6vw,30px); margin-bottom:14px}
.lead{max-width:1000px;margin:0 auto;font-size:18px;color:#222;line-height:1.6}
.muted{color:var(--muted);margin-bottom:10px}

/* directors */
.cards{display:flex; gap:26px; flex-wrap:wrap; margin-top:22px; justify-content:flex-start}
.card{background:var(--card); border-radius:14px; box-shadow:var(--shadow); padding:22px; display:flex; gap:20px; width:100%; max-width:1100px; align-items:flex-start}
.avatar-wrap{flex:0 0 180px; display:flex; align-items:center; justify-content:center}
.avatar{width:160px;height:160px;border-radius:50%;object-fit:cover;border:6px solid var(--red); box-shadow:0 12px 30px rgba(0,0,0,0.12)}
.card-body{flex:1}
.name{color:var(--red); font-weight:700; margin-bottom:6px}
.role{font-weight:700;color:#444;margin-bottom:10px}
.bio{color:#333;line-height:1.65;font-size:15px}

/* carousel */
.carousel{display:flex; align-items:center; gap:12px; position:relative; margin-top:18px}
.viewport{overflow:hidden; flex:1; border-radius:18px; background:var(--card); padding:18px; box-shadow:var(--shadow)}
.track{display:flex; gap:14px; align-items:center; transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.slide{width:420px;height:320px;object-fit:cover;border-radius:12px;cursor:zoom-in; box-shadow:0 10px 30px rgba(0,0,0,0.12)}
.car-btn{position:absolute; top:50%; transform:translateY(-50%); width:52px;height:52px;border-radius:50%;border:none;background:var(--red);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:10}
.car-btn.left{left:-22px} .car-btn.right{right:-22px}

/* work */
.work-actions{display:flex; justify-content:center; margin-bottom:18px}
.work-btn{display:inline-flex; align-items:center; gap:12px; padding:12px 18px; border-radius:12px; background:linear-gradient(90deg,var(--red),var(--red-dark)); color:#fff;border:none; cursor:pointer; box-shadow:0 12px 30px rgba(0,0,0,0.12)}
.work-btn .thumb img{width:60px;height:60px;object-fit:cover;border-radius:8px;border:3px solid rgba(255,255,255,0.15)}
.work-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:10px}
.work-img{width:100%;height:220px;object-fit:cover;border-radius:12px;cursor:zoom-in; box-shadow:0 8px 24px rgba(0,0,0,0.08)}

/* contact & footer */
.contact-grid{display:flex; justify-content:space-between; gap:20px; align-items:center; flex-wrap:wrap}
.footer{background:#0b0b0b;color:#ddd;padding:28px 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px}
.footer-logo{width:72px;height:72px;border-radius:50%;object-fit:cover;border:4px solid rgba(255,255,255,0.06); box-shadow:var(--shadow)}
.foot-name{font-weight:700;color:#fff}

/* lightbox */
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.95);z-index:9999;padding:18px}
.lightbox.show{display:flex}
.lb-inner{position:relative;max-width:1100px;width:100%;display:flex;flex-direction:column;align-items:center}
.lb-stage img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:8px}
.lb-close{position:absolute;right:8px;top:8px;background:#fff;border:none;border-radius:6px;padding:6px 10px;cursor:pointer}
.lb-tools{display:flex;gap:8px;margin-top:10px}
.lb-tools button{padding:8px 10px;border-radius:6px;border:none;background:#fff;cursor:pointer}

/* reveal animations */
.stage .reveal-left{opacity:0;transform:translateX(-40px);transition:all .7s cubic-bezier(.2,.7,.2,1)}
.stage .reveal-right{opacity:0;transform:translateX(40px);transition:all .7s cubic-bezier(.2,.7,.2,1)}
.stage .avatar, .stage .card-body, .stage .brand, .stage .hero, .stage .track {opacity:0; transform:translateY(14px); transition:all .7s}
.stage.active .reveal-left, .stage.active .reveal-right, .stage.active .avatar, .stage.active .card-body, .stage.active .brand, .stage.active .hero, .stage.active .track {opacity:1; transform:none}

/* logo animate */
.logo.animate{transform:scale(1.04) rotate(-2deg); box-shadow:0 24px 50px rgba(0,0,0,0.2)}

/* responsive */
@media (max-width:1100px){ .slide{width:320px;height:240px} .avatar{width:130px;height:130px} .avatar-wrap{flex:0 0 140px} }
@media (max-width:800px){
  .header-inner{flex-direction:column;align-items:flex-start}
  .topnav{margin-top:12px;flex-wrap:wrap}
  .slide{width:260px;height:200px}
  .card{flex-direction:column;align-items:center;text-align:center}
  .avatar-wrap{flex:0 0 auto}
}
@media (max-width:480px){
  .slide{width:200px;height:150px}
  .hero-title{font-size:28px}
  .avatar{width:110px;height:110px}
}